<template>
  <div>
    <div class="user-edit-container">
      <!-- 头部 -->
      <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />
      <!-- 用户资料 -->
      <van-cell-group>
        <van-cell title="头像" is-link>
          <template #default>
            <!-- js模拟文件选择框的点击事件 -->
            <img :src="userObj.photo" alt="" class="photo" @click="$refs.inputFileRef.click()">
            <!-- 文件选择框 -->
            <input type="file" accept="image/*" v-show="isShow" ref="inputFileRef" @change="onFileChange" />
          </template>
        </van-cell>
        <van-cell title="名称" :value="userObj.name" is-link @click="isShowDialog = true" />
        <van-cell title="生日" :value="userObj.birthday" is-link @click="showDatePicker" />
      </van-cell-group>
    </div>
    <!-- 修改名称弹出框 -->
    <van-dialog title="名称" show-cancel-button v-model="isShowDialog" :beforeClose="beforeCloseFn">
      <!-- 输入框 -->
      <van-field v-model.trim="userName" required placeholder="请输入用户名" />
    </van-dialog>
    <!-- 日期选择控件 -->
    <van-datetime-picker v-show="isShowPicker" v-model="currentDate" type="date" title="选择年月日" :min-date="minDate"
      :max-date="maxDate" @confirm="successEv" @cancel="cancelEv" />
  </div>
</template>

<script>
import { updateInfoAPI, updatePhotoAPI, userInfoAPI } from '@/api'
import { formatDate } from '@/utils/day'
export default {
  data() {
    return {
      userObj: {},
      // 文件选择是否显示
      isShow: false,
      // 修改名称弹出框
      isShowDialog: false,
      // 用户名称
      userName: '',
      // 是否展示时间选择器
      isShowPicker: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(), // 此时
      currentDate: new Date()// 当前时间
    }
  },
  methods: {
    // 修改头像
    async onFileChange(e) {
      if (e.target.files === 0) return// 未选择图片时
      const fd = new FormData()
      fd.append('photo', e.target.files[0])
      const res = await updatePhotoAPI({ fd })
      this.userObj.photo = res.data.data.photo
      // console.log(res)
    },
    // 展示修改名称弹出框
    // showDialog() {
    //   this.isShowDialog = true
    // }
    // 修改名称
    // 姓名校验
    /* 1-7位中英文数字组合，
    不通过则弹幕不关闭，
    通过则弹幕关闭调用接口
    */
    //  弹出框关闭前
    async beforeCloseFn(action, done) {
      // 点击了确定按钮
      if (action === 'confirm') {
        if (/^[A-Za-z0-9\u4e00-\u9fa5]{1,7}$/.test(this.userName)) {
          // 通过校验
          // 发请求同步到后台
          await updateInfoAPI({
            name: this.userName
          })
          done()
        } else {
          this.$msg({ type: 'warning', message: '用户名中英文和数字1-7位' })
          // 禁止弹框关闭
          done(false)
        }
      } else {
        // 关闭弹框
        done()
      }
    },
    // 点击显示日期选择器
    showDatePicker() {
      this.isShowPicker = true
      // 日期选择器的时间同步页面上显示的时间
      // 时间选择器上时间是对象
      // 页面上显示的时间年-月-日字符串，所以new Date()转为时间对象
      this.currentDate = new Date(this.userObj.birthday)
    },
    async successEv() {
      // 日期选择器里是日期对象，而后端需要的是年 - 月 - 日格式的字符串
      const dateStr = formatDate(this.currentDate)
      await updateInfoAPI({
        birthday: dateStr
      })
      // 同步到前台
      this.currentDate = dateStr
      this.isShowPicker = false
    },
    cancelEv() {
      this.isShowPicker = false
    }

  },
  async created() {
    const res = await userInfoAPI()
    this.userObj = res.data.data
    this.userName = this.userObj.name
    // console.log(this.userObj)
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
}

// 头像
.photo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>
